<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风荷载数据可视化</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- CSS 样式 -->
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background-color: #0a0e17;
            color: #e0e6ed;
            padding: 20px;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* 标题样式 */
        .title {
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5rem;
            color: #34c759;
            text-shadow: 0 0 10px rgba(52, 199, 89, 0.5);
            letter-spacing: 2px;
        }
        
        /* 控制面板样式 */
        .control-panel {
            background-color: rgba(16, 20, 33, 0.8);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            border: 1px solid rgba(52, 199, 89, 0.2);
            box-shadow: 0 0 20px rgba(52, 199, 89, 0.1);
            backdrop-filter: blur(5px);
        }
        
        .control-title {
            margin-bottom: 15px;
            font-size: 1.5rem;
            color: #34c759;
        }
        
        .control-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .control-item {
            display: flex;
            flex-direction: column;
        }
        
        .control-label {
            margin-bottom: 5px;
            color: #7a8b9f;
        }
        
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #2c3e50;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: #0a0e17;
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(52, 199, 89, 0.5);
        }
        
        input:checked + .slider {
            background-color: #34c759;
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
            background-color: #0a0e17;
        }
        
        .toggle-label {
            margin-left: 10px;
            font-size: 0.9rem;
        }
        
        /* 图表容器样式 */
        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .chart-card {
            background-color: rgba(16, 20, 33, 0.8);
            border-radius: 10px;
            padding: 20px;
            height: 400px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(52, 199, 89, 0.2);
            box-shadow: 0 0 20px rgba(52, 199, 89, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .chart-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(52, 199, 89, 0.2);
        }
        
        .chart-title {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: #34c759;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .chart-info {
            font-size: 0.8rem;
            color: #7a8b9f;
            margin-bottom: 10px;
        }
        
        .chart-container {
            height: calc(100% - 70px);
        }
        
        /* 特效样式 */
        .glow-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }
        
        .glow {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(52, 199, 89, 0.8) 0%, rgba(52, 199, 89, 0) 70%);
            animation: pulse 4s infinite ease-in-out;
            opacity: 0.1;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.1;
            }
            50% {
                transform: scale(1.2);
                opacity: 0.2;
            }
            100% {
                transform: scale(1);
                opacity: 0.1;
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .charts-container {
                grid-template-columns: 1fr;
            }
            
            .title {
                font-size: 1.8rem;
            }
            
            .chart-card {
                height: 350px;
            }
        }
        
        /* 加载动画 */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0a0e17;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.5s;
        }
        
        .loader-content {
            text-align: center;
        }
        
        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(52, 199, 89, 0.2);
            border-top: 5px solid #34c759;
            border-radius: 50%;
            margin: 0 auto 20px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loader-text {
            color: #34c759;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <!-- 加载动画 -->
    <div class="loader" id="loader">
        <div class="loader-content">
            <div class="loader-spinner"></div>
            <div class="loader-text">数据加载中...</div>
        </div>
    </div>

    <div class="container">
        <h1 class="title">风荷载数据可视化分析平台</h1>
        
        <!-- 控制面板 -->
        <div class="control-panel">
            <h2 class="control-title">数据选择面板</h2>
            <div class="control-grid">
                <div class="control-item">
                    <label class="control-label">塔底加速度</label>
                    <label class="toggle-switch">
                        <input type="checkbox" id="toggle-chart1" checked>
                        <span class="slider"></span>
                    </label>
                    <span class="toggle-label">显示/隐藏</span>
                </div>
                
                <div class="control-item">
                    <label class="control-label">叶尖加速度</label>
                    <label class="toggle-switch">
                        <input type="checkbox" id="toggle-chart2" checked>
                        <span class="slider"></span>
                    </label>
                    <span class="toggle-label">显示/隐藏</span>
                </div>
                
                <div class="control-item">
                    <label class="control-label">轮毂加速度</label>
                    <label class="toggle-switch">
                        <input type="checkbox" id="toggle-chart3" checked>
                        <span class="slider"></span>
                    </label>
                    <span class="toggle-label">显示/隐藏</span>
                </div>
                
                <div class="control-item">
                    <label class="control-label">轮毂位移</label>
                    <label class="toggle-switch">
                        <input type="checkbox" id="toggle-chart4" checked>
                        <span class="slider"></span>
                    </label>
                    <span class="toggle-label">显示/隐藏</span>
                </div>
                
                <div class="control-item">
                    <label class="control-label">叶尖位移</label>
                    <label class="toggle-switch">
                        <input type="checkbox" id="toggle-chart5" checked>
                        <span class="slider"></span>
                    </label>
                    <span class="toggle-label">显示/隐藏</span>
                </div>
                
                <div class="control-item">
                    <label class="control-label">塔底位移</label>
                    <label class="toggle-switch">
                        <input type="checkbox" id="toggle-chart6" checked>
                        <span class="slider"></span>
                    </label>
                    <span class="toggle-label">显示/隐藏</span>
                </div>
            </div>
        </div>
        
        <!-- 图表容器 -->
        <div class="charts-container">
            <!-- 图表 1: 塔底加速度 -->
            <div class="chart-card" id="chart-card1">
                <div class="chart-title">
                    风荷载塔底加速度
                    <span class="chart-info">单位: m/s²</span>
                </div>
                <div class="chart-container" id="chart1"></div>
            </div>
            
            <!-- 图表 2: 叶尖加速度 -->
            <div class="chart-card" id="chart-card2">
                <div class="chart-title">
                    风荷载叶尖加速度修正
                    <span class="chart-info">单位: m/s²</span>
                </div>
                <div class="chart-container" id="chart2"></div>
            </div>
            
            <!-- 图表 3: 轮毂加速度 -->
            <div class="chart-card" id="chart-card3">
                <div class="chart-title">
                    风载荷轮毂加速度修正
                    <span class="chart-info">单位: m/s²</span>
                </div>
                <div class="chart-container" id="chart3"></div>
            </div>
            
            <!-- 图表 4: 轮毂位移 -->
            <div class="chart-card" id="chart-card4">
                <div class="chart-title">
                    风载荷轮毂位移修正
                    <span class="chart-info">单位: m</span>
                </div>
                <div class="chart-container" id="chart4"></div>
            </div>
            
            <!-- 图表 5: 叶尖位移 -->
            <div class="chart-card" id="chart-card5">
                <div class="chart-title">
                    风载荷叶尖位移修正
                    <span class="chart-info">单位: m</span>
                </div>
                <div class="chart-container" id="chart5"></div>
            </div>
            
            <!-- 图表 6: 塔底位移 -->
            <div class="chart-card" id="chart-card6">
                <div class="chart-title">
                    位移塔底风载荷
                    <span class="chart-info">单位: m</span>
                </div>
                <div class="chart-container" id="chart6"></div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 隐藏加载动画
        window.addEventListener('load', function() {
            setTimeout(function() {
                document.getElementById('loader').style.opacity = '0';
                setTimeout(function() {
                    document.getElementById('loader').style.display = 'none';
                }, 500);
            }, 1000);
        });

        // 数据处理函数
        function processData(data) {
            const processedData = {
                time: [],
                value: []
            };

            data.forEach(item => {
                const time = parseFloat(item.time);
                const value = parseFloat(item.value);
                
                processedData.time.push(time);
                processedData.value.push(value);
            });

            return processedData;
        }

        // 模拟数据解析 (实际应用中应该从文件或API获取数据)
        // 这里直接从提供的数据创建对象
        const rawData = {
            chart1: [
                { time: 0.0, value: -1.615089750828247e-08 },
                { time: 0.04775668680667877, value: 0.6520106792449951 },
                { time: 0.48112210631370544, value: -0.16146188974380493 },
                { time: 2.5745604038238525, value: 0.00928898248821497 },
                { time: 6.469705104827881, value: -0.006064927205443382 },
                { time: 15.21413516998291, value: -0.0005254789139144123 },
                { time: 27.214136123657227, value: -0.00933883711695671 },
                { time: 39.214134216308594, value: -0.00011258703307248652 },
                { time: 51.214134216308594, value: -0.00020341845811344683 },
                { time: 63.214134216308594, value: 0.0014729028334841132 },
                { time: 75.2141342163086, value: -0.002778163878247142 },
                { time: 87.2141342163086, value: -0.015189912170171738 },
                { time: 99.2141342163086, value: -0.03546745330095291 },
                { time: 111.2141342163086, value: 0.01923411525785923 },
                { time: 120.0, value: -0.04727201536297798 }
            ],
            chart2: [
                { time: 0.0, value: -5.237959612713894e-06 },
                { time: 0.04775817692279816, value: -7.048577785491943 },
                { time: 0.48113715648651123, value: -16.379716873168945 },
                { time: 2.5746407508850098, value: -3.021286725997925 },
                { time: 6.471377849578857, value: 4.566359519958496 },
                { time: 15.199317932128906, value: 0.7339969277381897 },
                { time: 27.199317932128906, value: -0.23802000284194946 },
                { time: 39.199317932128906, value: -0.32359957695007324 },
                { time: 51.199317932128906, value: -0.16235151886940002 },
                { time: 63.199317932128906, value: -0.11426819860935211 },
                { time: 75.1993179321289, value: 0.037642013281583786 },
                { time: 87.1993179321289, value: 0.07211579382419586 },
                { time: 99.1993179321289, value: 0.2679988741874695 },
                { time: 111.1993179321289, value: 0.03540942445397377 },
                { time: 120.0, value: 0.041071344166994095 }
            ],
            chart3: [
                { time: 0.0, value: -5.613039775198558e-06 },
                { time: 2.184185743331909, value: -0.0024213339202106 },
                { time: 12.82076644897461, value: -0.014624064788222313 },
                { time: 24.82076644897461, value: -0.0933702290058136 },
                { time: 36.82076644897461, value: -0.1375797986984253 },
                { time: 48.82076644897461, value: -0.04125387594103813 },
                { time: 60.82076644897461, value: 0.0025742391590029 },
                { time: 72.82076263427734, value: 0.0007016440504230559 },
                { time: 84.82076263427734, value: -0.012324100360274315 },
                { time: 96.82076263427734, value: -0.017850428819656372 },
                { time: 108.82076263427734, value: -0.04202001914381981 },
                { time: 120.0, value: -0.006020079366862774 }
            ],
            chart4: [
                { time: 0.0, value: 0.0 },
                { time: 2.184185743331909, value: -0.0020489234011620283 },
                { time: 12.82076644897461, value: -0.4049311876296997 },
                { time: 24.82076644897461, value: -3.1008222103118896 },
                { time: 36.82076644897461, value: -11.630677223205566 },
                { time: 48.82076644897461, value: -26.879709243774414 },
                { time: 60.82076644897461, value: -44.816734313964844 },
                { time: 72.82076263427734, value: -63.522605895996094 },
                { time: 84.82076263427734, value: -83.00100708007812 },
                { time: 96.82076263427734, value: -106.06270599365234 },
                { time: 108.82076263427734, value: -133.22874450683594 },
                { time: 120.0, value: -161.13726806640625 }
            ],
            chart5: [
                { time: 0.0, value: 0.0 },
                { time: 0.04775817692279816, value: -0.0006368798785842955 },
                { time: 0.48113715648651123, value: 0.016918884590268135 },
                { time: 2.5746407508850098, value: 0.01306916307657957 },
                { time: 6.471377849578857, value: 0.011442100629210472 },
                { time: 15.199317932128906, value: 0.015460837632417679 },
                { time: 27.199317932128906, value: 0.020850319415330887 },
                { time: 39.199317932128906, value: 0.038793254643678665 },
                { time: 51.199317932128906, value: 0.020772503688931465 },
                { time: 63.199317932128906, value: 0.02134839817881584 },
                { time: 75.1993179321289, value: 0.004066907800734043 },
                { time: 87.1993179321289, value: -0.013244287110865116 },
                { time: 99.1993179321289, value: -0.03956831619143486 },
                { time: 111.1993179321289, value: -0.004919061437249184 },
                { time: 120.0, value: 0.004927386995404959 }
            ],
            chart6: [
                { time: 0.0, value: 0.0 },
                { time: 0.04775668680667877, value: 6.312558252830058e-05 },
                { time: 0.48112210631370544, value: -0.0003365027951076627 },
                { time: 2.5745604038238525, value: -0.000670233799610287 },
                { time: 6.469705104827881, value: -0.0017251152312383056 },
                { time: 15.21413516998291, value: -0.0221260879188776 },
                { time: 27.214136123657227, value: -0.18158678710460663 },
                { time: 39.214134216308594, value: -1.40573251247406 },
                { time: 51.214134216308594, value: -3.2782881259918213 },
                { time: 63.214134216308594, value: -6.069581031799316 },
                { time: 75.2141342163086, value: -9.444974899291992 },
                { time: 87.2141342163086, value: -14.031475067138672 },
                { time: 99.2141342163086, value: -20.6468505859375 },
                { time: 111.2141342163086, value: -28.634153366088867 },
                { time: 120.0, value: -34.85881423950195 }
            ]
        };

        // 处理后的数据
        const processedData = {
            chart1: processData(rawData.chart1),
            chart2: processData(rawData.chart2),
            chart3: processData(rawData.chart3),
            chart4: processData(rawData.chart4),
            chart5: processData(rawData.chart5),
            chart6: processData(rawData.chart6)
        };

        // 创建图表实例
        const charts = {
            chart1: echarts.init(document.getElementById('chart1')),
            chart2: echarts.init(document.getElementById('chart2')),
            chart3: echarts.init(document.getElementById('chart3')),
            chart4: echarts.init(document.getElementById('chart4')),
            chart5: echarts.init(document.getElementById('chart5')),
            chart6: echarts.init(document.getElementById('chart6'))
        };

        // 图表配置选项
        const options = {
            chart1: {
                title: {
                    text: '风荷载塔底加速度',
                    left: 'center',
                    textStyle: {
                        color: '#34c759',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}秒<br/>{a}: {c} m/s²'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: processedData.chart1.time,
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '加速度 (m/s²)',
                    nameTextStyle: {
                        color: '#a0aec0'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                series: [{
                    name: '塔底加速度',
                    data: processedData.chart1.value,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#34c759'
                    },
                    lineStyle: {
                        width: 2,
                        shadowColor: 'rgba(52, 199, 89, 0.3)',
                        shadowBlur: 10
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(52, 199, 89, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(52, 199, 89, 0.05)'
                            }]
                        }
                    }
                }],
                backgroundColor: 'transparent'
            },
            chart2: {
                title: {
                    text: '风荷载叶尖加速度修正',
                    left: 'center',
                    textStyle: {
                        color: '#34c759',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}秒<br/>{a}: {c} m/s²'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: processedData.chart2.time,
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '加速度 (m/s²)',
                    nameTextStyle: {
                        color: '#a0aec0'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                series: [{
                    name: '叶尖加速度',
                    data: processedData.chart2.value,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#3498db'
                    },
                    lineStyle: {
                        width: 2,
                        shadowColor: 'rgba(52, 152, 219, 0.3)',
                        shadowBlur: 10
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(52, 152, 219, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(52, 152, 219, 0.05)'
                            }]
                        }
                    }
                }],
                backgroundColor: 'transparent'
            },
            chart3: {
                title: {
                    text: '风载荷轮毂加速度修正',
                    left: 'center',
                    textStyle: {
                        color: '#34c759',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}秒<br/>{a}: {c} m/s²'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: processedData.chart3.time,
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '加速度 (m/s²)',
                    nameTextStyle: {
                        color: '#a0aec0'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                series: [{
                    name: '轮毂加速度',
                    data: processedData.chart3.value,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#e74c3c'
                    },
                    lineStyle: {
                        width: 2,
                        shadowColor: 'rgba(231, 76, 60, 0.3)',
                        shadowBlur: 10
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(231, 76, 60, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(231, 76, 60, 0.05)'
                            }]
                        }
                    }
                }],
                backgroundColor: 'transparent'
            },
            chart4: {
                title: {
                    text: '风载荷轮毂位移修正',
                    left: 'center',
                    textStyle: {
                        color: '#34c759',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}秒<br/>{a}: {c} m'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: processedData.chart4.time,
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '位移 (m)',
                    nameTextStyle: {
                        color: '#a0aec0'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                series: [{
                    name: '轮毂位移',
                    data: processedData.chart4.value,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#f39c12'
                    },
                    lineStyle: {
                        width: 2,
                        shadowColor: 'rgba(243, 156, 18, 0.3)',
                        shadowBlur: 10
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(243, 156, 18, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(243, 156, 18, 0.05)'
                            }]
                        }
                    }
                }],
                backgroundColor: 'transparent'
            },
            chart5: {
                title: {
                    text: '风载荷叶尖位移修正',
                    left: 'center',
                    textStyle: {
                        color: '#34c759',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}秒<br/>{a}: {c} m'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: processedData.chart5.time,
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '位移 (m)',
                    nameTextStyle: {
                        color: '#a0aec0'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                series: [{
                    name: '叶尖位移',
                    data: processedData.chart5.value,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#9b59b6'
                    },
                    lineStyle: {
                        width: 2,
                        shadowColor: 'rgba(155, 89, 182, 0.3)',
                        shadowBlur: 10
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(155, 89, 182, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(155, 89, 182, 0.05)'
                            }]
                        }
                    }
                }],
                backgroundColor: 'transparent'
            },
            chart6: {
                title: {
                    text: '位移塔底风载荷',
                    left: 'center',
                    textStyle: {
                        color: '#34c759',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}秒<br/>{a}: {c} m'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: processedData.chart6.time,
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '位移 (m)',
                    nameTextStyle: {
                        color: '#a0aec0'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4a5568'
                        }
                    },
                    axisLabel: {
                        color: '#a0aec0'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(74, 85, 104, 0.3)'
                        }
                    }
                },
                series: [{
                    name: '塔底位移',
                    data: processedData.chart6.value,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#3498db'
                    },
                    lineStyle: {
                        width: 2,
                        shadowColor: 'rgba(52, 152, 219, 0.3)',
                        shadowBlur: 10
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(52, 152, 219, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(52, 152, 219, 0.05)'
                            }]
                        }
                    }
                }],
                backgroundColor: 'transparent'
            }
        };

        // 设置图表选项
        for (const chartId in charts) {
            charts[chartId].setOption(options[chartId]);
        }

        // 添加开关切换事件监听
        document.getElementById('toggle-chart1').addEventListener('change', function() {
            if (this.checked) {
                charts.chart1.setOption(options.chart1);
                document.getElementById('chart-card1').style.display = 'block';
            } else {
                charts.chart1.clear();
                document.getElementById('chart-card1').style.display = 'none';
            }
        });

        document.getElementById('toggle-chart2').addEventListener('change', function() {
            if (this.checked) {
                charts.chart2.setOption(options.chart2);
                document.getElementById('chart-card2').style.display = 'block';
            } else {
                charts.chart2.clear();
                document.getElementById('chart-card2').style.display = 'none';
            }
        });

        document.getElementById('toggle-chart3').addEventListener('change', function() {
            if (this.checked) {
                charts.chart3.setOption(options.chart3);
                document.getElementById('chart-card3').style.display = 'block';
            } else {
                charts.chart3.clear();
                document.getElementById('chart-card3').style.display = 'none';
            }
        });

        document.getElementById('toggle-chart4').addEventListener('change', function() {
            if (this.checked) {
                charts.chart4.setOption(options.chart4);
                document.getElementById('chart-card4').style.display = 'block';
            } else {
                charts.chart4.clear();
                document.getElementById('chart-card4').style.display = 'none';
            }
        });

        document.getElementById('toggle-chart5').addEventListener('change', function() {
            if (this.checked) {
                charts.chart5.setOption(options.chart5);
                document.getElementById('chart-card5').style.display = 'block';
            } else {
                charts.chart5.clear();
                document.getElementById('chart-card5').style.display = 'none';
            }
        });

        document.getElementById('toggle-chart6').addEventListener('change', function() {
            if (this.checked) {
                charts.chart6.setOption(options.chart6);
                document.getElementById('chart-card6').style.display = 'block';
            } else {
                charts.chart6.clear();
                document.getElementById('chart-card6').style.display = 'none';
            }
        });

        // 窗口大小调整时重新调整图表大小
        window.addEventListener('resize', function() {
            for (const chartId in charts) {
                charts[chartId].resize();
            }
        });

        // 添加图表卡片的动画效果
        const chartCards = document.querySelectorAll('.chart-card');
        chartCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                const glow = document.createElement('div');
                glow.className = 'glow';
                glow.style.width = '200%';
                glow.style.height = '200%';
                glow.style.left = '-50%';
                glow.style.top = '-50%';
                this.querySelector('.glow-effect')?.remove();
                const glowEffect = document.createElement('div');
                glowEffect.className = 'glow-effect';
                glowEffect.appendChild(glow);
                this.appendChild(glowEffect);
            });

            card.addEventListener('mouseleave', function() {
                this.querySelector('.glow-effect')?.remove();
            });
        });
    </script>
</body>
</html>